<template>
  <div class="search-container">
    <a-form class="search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="24" type="flex">
        <a-col>
          <a-form-item label="用户">
            <a-input allowClear style="width: 180px" v-decorator="['userName']" placeholder="根据名字搜索" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="主机名">
            <a-input allowClear style="width: 180px" v-decorator="['hostName']" placeholder="根据主机名搜索" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="驱动类型">
            <a-select v-decorator="['driverType']" allowClear style="width: 120px" placeholder="全部">
              <a-select-option
                v-for="(columns, i) in selectColumns.driverType"
                :key="i"
                :value="columns.value"
              >{{ columns.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="操作系统">
            <a-select v-decorator="['osType']" allowClear style="width: 120px" placeholder="全部">
              <a-select-option
                v-for="(columns, i) in selectColumns.osType"
                :key="i"
                :value="columns.value"
              >{{ columns.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="升级结果">
            <a-select v-decorator="['result']" allowClear style="width: 120px" placeholder="全部">
              <a-select-option
                v-for="(columns, i) in selectColumns.upgrade"
                :key="i"
                :value="columns.value"
              >{{ columns.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="期间">
            <a-date-picker
              style="width: 180px"
              :disabledDate="disabledStartDate"
              v-model="startValue"
              format="YYYY-MM-DD"
              placeholder="开始日期"
            />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="至">
            <a-date-picker
              style="width: 180px"
              :disabledDate="disabledEndDate"
              v-model="endValue"
              format="YYYY-MM-DD"
              placeholder="结束日期"
            />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="升级前版本">
            <a-select v-decorator="['oldVer']" allowClear style="width: 120px" placeholder="全部">
              <a-select-option
                v-for="(oldVer, i) in form.oldVer"
                :key="i"
                :value="oldVer"
              >{{ oldVer }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="升级后版本">
            <a-select v-decorator="['newVer']" allowClear style="width: 120px" placeholder="全部">
              <a-select-option
                v-for="(newVer, i) in form.newVer"
                :key="i"
                :value="newVer"
              >{{ newVer }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">清空</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { selectColumns } from "@/common/AntSelectConfig";
import { ObjectToCleanUndefined as CleanUndefined } from "@/utils";
import { DatePickerMixin } from "@/mixins";
import { log_installversions } from "@/api/log";
@Component({
  name: "LogsSearchTemp"
})
export default class LogsSearchTemp extends DatePickerMixin {
  private selectColumns: any = selectColumns;
  private form: any = {};
  handleSearch(e: any) {
    e.preventDefault();
    const [startTime, endTime] = [
      this.startValue?.valueOf(),
      this.endValue?.valueOf()
    ];
    if ((startTime && !endTime) || (endTime && !startTime)) {
      this.$message.warning("日期区间格式错误");
      return;
    }
    let _formDate = {};
    if (startTime && endTime) {
      _formDate = { startTime, endTime };
    }
    const values = this.form.getFieldsValue();
    const _push = CleanUndefined({ ...values, ..._formDate });
    this.$emit("search", _push);
  }

  handleReset() {
    this.startValue = null;
    this.endValue = null;
    this.form.resetFields();
    this.$emit("search", {});
  }

  async initVersions() {
    const { data } = await log_installversions();
    if (data.errNo === 0) {
      const { oldVers, newVers } = data.item;
      this.form = { oldVer: oldVers.filter((ver: any) => ver), newVer: newVers.filter((ver: any) => ver), ...this.form };
    }
  }

  created() {
    this.form = this.$form.createForm(this);
    this.initVersions();
  }
}
</script>
<style lang="less" scoped>
.search-container {
  .search-form {
    padding: 24px;
    background: #fbfbfb;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    .ant-form-item {
      display: flex;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
